<template>
  <div class="schedule">
    <el-dialog
      title="添加影片"
      :modal-append-to-body="false"
      :visible="isDialog"
      @close="cls"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        ref="ruleForm"
      >
        <el-form-item label="电影名" prop="name">
          <el-select
            v-model="ruleForm.name"
            @click.native="showMovie"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item"
              @click.native="findTime"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影院" prop="cinema_name">
          <el-select
            v-model="ruleForm.cinema_name"
            @click.native="getAllCinema"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsCinema"
              :key="item"
              :label="item"
              @click.native="findHall"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影厅" prop="hallName">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="上映日期" prop="time">
          <el-input v-model="ruleForm.time"></el-input>
        </el-form-item>
        <el-form-item label="放映日期" prop="showDate">
          <el-date-picker
            v-model="ruleForm.showDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="放映时间" prop="showTime">
          <el-input v-model="ruleForm.showTime"></el-input>
        </el-form-item>
        <el-form-item label="售价" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex">
        <el-col :span="20"> </el-col>
        <el-col>
          <el-button @click="cls">取消</el-button>
          <el-button type="primary" @click="add">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getAllMovie, getAllCinema } from '@/api/schedule'
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      rules: {},
      options: [], // 电影
      optionsCinema: [], // 影院
      addObj: {
        movieId: '',
        cinemaId: '',
        hallName: '',
        showDate: '',
        showTime: '',
        price: ''
      },
      allMovie: [],
      allCinema: [],
      cinemaId: ''
    }
  },
  computed: {
    ...mapState('schedule', ['ruleForm', 'isAdd', 'isDialog'])
  },
  methods: {
    ...mapActions('schedule', ['changeIsDialog', 'changeRuleFormTime']),
    cls () {
      this.changeIsDialog(false)
    },
    add () {
      if (this.isAdd) {
      } else {
        this.$emit('update', this.ruleForm)
      }
      this.changeIsDialog(false)
    },
    // 获取所有电影
    async showMovie () {
      const res = await getAllMovie()
      if (res.success_code !== 200) return this.$message.error(res.message)
      this.addObj.movieId = res.movie_id // 得到电影id
      this.options = res.data.map((item) => item.name) // 得到所有电影
      this.allMovie = res.data // 用于下面筛选出时间
    },
    // 自动绑定时间
    findTime () {
      const time = this.allMovie.find(item => item.name === this.ruleForm.name) // 筛选出时间
      this.changeRuleFormTime(time.public_date)
    },
    // 获取所有影院
    async getAllCinema () {
      const res = await getAllCinema()
      console.log(res)
      if (res.success_code !== 200) return this.$message.error(res.message)
      this.allCinema = res.data
      this.optionsCinema = res.data.map(item => item.cinema_name)
    },
    findHall () {
      const cinema = this.allCinema.find(item => item.cinema_name === this.ruleForm.cinema_name) // 筛选影院
      this.cinemaId = cinema.cinema_id
    }
  }
}
</script>

<style>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  position: absolute;
  left: 0;
}
</style>
